

import React, { useState, useEffect } from "react"
import { ParkListApi, rotationApi } from '../api/api'
import { History } from "history";
import { useHistory } from "react-router-dom";
import Page from "./Page";
import { Image, Swiper } from "antd-mobile";


export default function Park() {
   const [list, setlist] = useState([])
   const [list2, setlist2] = useState([])
   const history = useHistory()

   // 页数
   const [pageNum, setPageNum] = useState(1)
   // 一页显示数量
   const [pageSize, setPageSize] = useState(5)
   // 总页数
   const [pages, setPages] = useState(1)

   const parkList = async (params: any) => {
      console.log(params);

      let res = await ParkListApi(params)
      // console.log(res);
      setlist(res.data.rows)
      setPages(Math.ceil(res.data.total / pageSize))
   }

   async function onChangePage(val: any) {
      parkList({
         pageNum: val,
         pageSize: 5
      })
      setPageNum(val)
   }

   const rotation = async () => {
      const res = await rotationApi()
      console.log(res.data.rows);

      setlist2(res.data.rows)
   }

   useEffect(() => {
      parkList({ pageNum, pageSize })
      rotation()
   }, [])

   const his = () => {
      history.push('./parkjl')
   }

   const car = () => {
      history.push('./ParkCar')
   }
   const ty = (id: any) => {
      console.log(id);
      
      history.push('./ParkDetails/' + id)
   }

   const pay = () => {
      history.push('./ParkPay')
   }

   const feebback =()=>{
      history.push('./ParkFeedBack')
   }

   const Packnews= ()=>{
      history.push('./ParkNews')
   }
   return (
      <div style={{ overflow: 'auto', height: 'calc(100vh - 100px)' }}>

         <div>
            <Swiper className='swiper' autoplay loop>
               {
                  list2.map((item: any, index: any) => {
                     return (
                        <Swiper.Item key={index}>
                           <Image src={"http://124.93.196.45:10001/" + item.advImg}></Image>
                        </Swiper.Item>
                     )
                  })}
            </Swiper>
         </div >

         <button onClick={() => {
            his()
         }}>
            <div>查询停车记录列表</div>
         </button>
         <button onClick={() => {
            car()
         }}>
            <div>查询车辆信息</div>
         </button>
         <button onClick={() => {
            pay()
         }}>
            <div>充值</div>
         </button>


         <button onClick={() => {
            feebback()
         }}>
            <div>新增意见反馈</div>
         </button>

         <button onClick={() => {
            Packnews()
         }}>
            <div>新闻</div>
         </button>

         {
            list.map((item: any, index: any) => {
               return (
                  <div key={item.id} >
                     <div className="park" onClick={() => {
                        ty(item.id)
                     }}>
                        <div className="wslheader">
                           <h3>{item.parkName}</h3></div>
                        <div className="wslheader"> 空位数量 : {item.vacancy}</div>
                        <div className="wslheader"> 地址 : {item.address}</div>
                        <div className="wslheader" style={{ display: 'flex' }}>
                           <p style={{ paddingRight: '50px' }}>收费（一小时）：{item.rates}块</p>
                           <p>距离 : {item.distance}km</p>
                        </div>
                     </div>
                  </div>
               )
            })
         }
         <Page onChangePage={onChangePage} pagebtnall={pages} pagebtnnum={5} pagecur={pageNum}></Page>
      </div >
   )
}